
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太空生日庆祝</title>
    <style>
    
    
    
    /* 顶部导航栏 */
/* 顶部导航栏 */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #000; /* 改为纯黑色 */
    display: flex;
    align-items: center;
    justify-content: center; /* 改为居中对齐 */
    padding: 0 20px;
    z-index: 2000;
    /* 移除边框和下划线 */
    border-bottom: none;
}

.nav-back-btn {
    position: absolute; /* 绝对定位，不影响主题居中 */
    left: 20px; /* 固定在左侧 */
    width: auto; /* 自动宽度 */
    height: auto; /* 自动高度 */
    background: transparent; /* 透明背景 */
    color: #ba68c8; /* 紫色文字 */
    border-radius: 0; /* 移除圆角 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem; /* 增大字体 */
    font-weight: bold;
    cursor: pointer;
    /* 移除所有边框和阴影 */
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
    padding: 10px; /* 增加点击区域 */
}

.nav-back-btn:hover {
    color: #ab47bc; /* 深一点的紫色 */
    transform: scale(1.1);
    background: transparent; /* 保持透明背景 */
}

.nav-title {
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    /* 移除flex:1和margin，让标题自然居中 */
}

/* 删除占位符样式 */
.nav-placeholder {
    display: none;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            height: 100vh;
            background: #000;
            color: white;
        }
        
        .space-background {
            position: fixed;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #0b0b2d, #000);
            z-index: -2;
        }
        
        .stars-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .star {
            position: absolute;
            background-color: #ffffff;
            border-radius: 50%;
        }
        
        .star.small {
            width: 1px;
            height: 1px;
            animation: twinkle-small 4s infinite ease-in-out;
        }
        
        .star.medium {
            width: 2px;
            height: 2px;
            animation: twinkle-medium 3s infinite ease-in-out;
        }
        
        .star.large {
            width: 3px;
            height: 3px;
            animation: twinkle-large 5s infinite ease-in-out;
        }
        
        @keyframes twinkle-small {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        
        @keyframes twinkle-medium {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
        
        @keyframes twinkle-large {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.8; }
        }
        
        .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 1;
    /* 添加顶部内边距，避免被导航栏遮挡 */
    padding-top: 80px;
    box-sizing: border-box;
}
        
        .title {
            font-size: 3rem;
            margin-bottom: 40px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
            background: linear-gradient(to right, #ff7eb3, #ff758c, #ff7eb3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
            to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 118, 140, 0.6); }
        }
        
        .start-btn {
            background-color: #ff7eb3;
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.5rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 126, 179, 0.7);
            font-weight: bold;
            letter-spacing: 2px;
            position: relative;
            z-index: 2;
        }
        
        .start-btn:hover {
            background-color: #ff5c9a;
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(255, 126, 179, 0.9);
        }
        
        .stars-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0b0b2d, #000);
    z-index: 10;
    /* 添加顶部内边距 */
    padding-top: 60px;
    box-sizing: border-box;
}
        
        .big-star {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    animation: cosmic-twinkle 4s infinite ease-in-out;
    z-index: 5;
    transition: all 0.5s ease;
    margin-left: -40px;
    margin-top: -40px;
    /* 多层光晕效果 */
    box-shadow: 
        0 0 15px currentColor,
        0 0 30px currentColor,
        0 0 60px rgba(255, 255, 255, 0.3),
        inset 0 0 25px rgba(255, 255, 255, 0.4),
        inset 0 0 50px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* 基础渐变 */
    background: 
        radial-gradient(circle at 30% 30%, 
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.7) 15%,
            var(--star-color) 45%,
            var(--star-dark) 80%,
            rgba(0, 0, 0, 0.3) 100%);
    filter: drop-shadow(0 0 8px currentColor);
}

        
        .big-star:hover {
    transform: scale(1.25) rotate(5deg);
    animation-play-state: paused;
    box-shadow: 
        0 0 25px currentColor,
        0 0 50px currentColor,
        0 0 100px rgba(255, 255, 255, 0.5),
        inset 0 0 35px rgba(255, 255, 255, 0.6),
        inset 0 0 70px rgba(255, 255, 255, 0.3);
}
        
        @keyframes cosmic-twinkle {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
        box-shadow: 
            0 0 15px currentColor,
            0 0 30px currentColor,
            0 0 60px rgba(255, 255, 255, 0.3),
            inset 0 0 25px rgba(255, 255, 255, 0.4);
    }
    25% { 
        transform: scale(1.08) rotate(1deg);
        opacity: 0.9;
        box-shadow: 
            0 0 20px currentColor,
            0 0 40px currentColor,
            0 0 80px rgba(255, 255, 255, 0.4),
            inset 0 0 30px rgba(255, 255, 255, 0.5);
    }
    50% { 
        transform: scale(1.05) rotate(-1deg);
        opacity: 1;
        box-shadow: 
            0 0 25px currentColor,
            0 0 50px currentColor,
            0 0 100px rgba(255, 255, 255, 0.5),
            inset 0 0 35px rgba(255, 255, 255, 0.6);
    }
    75% { 
        transform: scale(1.12) rotate(2deg);
        opacity: 0.8;
        box-shadow: 
            0 0 18px currentColor,
            0 0 35px currentColor,
            0 0 70px rgba(255, 255, 255, 0.4),
            inset 0 0 28px rgba(255, 255, 255, 0.5);
    }
}
        
       /* 中心星星 - 标准圆形，中等大小 */
/* 中心星星 - 调整中心亮部位置 */
.big-star.yellow {
    --star-color: rgba(255, 235, 59, 0.95);
    --star-dark: rgba(251, 192, 45, 0.9);
    color: #ffeb3b;
    animation-delay: 0s;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    /* 轻微不规则边缘 - 与蓝色对齐 */
    border-radius: 49% 51% 48% 52% / 51% 49% 51% 49%;
    /* 调整中心亮部位置 - 与蓝色对齐但不同 */
    background: 
        radial-gradient(circle at 50% 35%,  /* 调整Y轴位置，比蓝色稍低 */
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.6) 20%,
            var(--star-color) 50%,
            var(--star-dark) 85%,
            rgba(0, 0, 0, 0.05) 100%),
        radial-gradient(circle at 50% 50%,
            rgba(255, 235, 59, 0.08) 0%,
            rgba(255, 235, 59, 0.04) 30%,
            transparent 60%);
}

/* 左上角星星 - 调整边缘与黄色对齐 */
.big-star.pink {
    --star-color: rgba(255, 126, 179, 0.9);
    --star-dark: rgba(255, 92, 154, 0.8);
    color: #ff7eb3;
    animation-delay: 0.5s;
    width: 75px;
    height: 75px;
    margin-left: -37.5px;
    margin-top: -37.5px;
    /* 调整边缘与黄色对齐但保持差异 */
    border-radius: 49.5% 50.5% 48.5% 51.5% / 51.5% 48.5% 51.5% 48.5%;
    /* 调整中心亮部位置 */
    background: 
        radial-gradient(circle at 50% 40%,  /* 与黄色蓝色对齐但不同位置 */
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 18%,
            var(--star-color) 45%,
            var(--star-dark) 80%,
            rgba(0, 0, 0, 0.2) 100%),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 4px
        );
}

/* 右上角星星 - 保持现有但作为基准 */
.big-star.blue {
    --star-color: rgba(79, 195, 247, 0.9);
    --star-dark: rgba(41, 182, 246, 0.8);
    color: #4fc3f7;
    animation-delay: 1s;
    width: 85px;
    height: 85px;
    margin-left: -42.5px;
    margin-top: -42.5px;
    /* 保持作为基准 */
    border-radius: 49% 51% 48% 52% / 51% 49% 51% 49%;
    /* 中心偏上的亮部 - 作为基准位置 */
    background: 
        radial-gradient(circle at 50% 30%, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 20%,
            var(--star-color) 50%,
            var(--star-dark) 85%,
            rgba(0, 0, 0, 0.2) 100%),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 3px,
            transparent 6px
        );
}

/* 左下角星星 - 调整边缘与黄色对齐 */
.big-star.purple {
    --star-color: rgba(186, 104, 200, 0.9);
    --star-dark: rgba(171, 71, 188, 0.8);
    color: #ba68c8;
    animation-delay: 1.5s;
    width: 78px;
    height: 82px;
    margin-left: -39px;
    margin-top: -41px;
    /* 调整边缘与黄色对齐 */
    border-radius: 49.2% 50.8% 48.8% 51.2% / 51.2% 48.8% 51.2% 48.8%;
    /* 调整中心亮部位置 */
    background: 
        radial-gradient(circle at 50% 38%,  /* 与黄色蓝色对齐但不同位置 */
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 22%,
            var(--star-color) 48%,
            var(--star-dark) 82%,
            rgba(0, 0, 0, 0.2) 100%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.2) 2%, transparent 4%),
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 2%, transparent 4%),
        radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.15) 1%, transparent 3%);
}

/* 右下角星星 - 调整边缘与黄色对齐 */
.big-star.green {
    --star-color: rgba(129, 199, 132, 0.9);
    --star-dark: rgba(102, 187, 106, 0.8);
    color: #81c784;
    animation-delay: 2s;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    margin-top: -36px;
    /* 调整边缘与黄色对齐 */
    border-radius: 49.8% 50.2% 48.2% 51.8% / 51.8% 48.2% 51.8% 48.2%;
    /* 调整中心亮部位置 */
    background: 
        radial-gradient(circle at 50% 42%,  /* 与黄色蓝色对齐但不同位置 */
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 25%,
            var(--star-color) 52%,
            var(--star-dark) 88%,
            rgba(0, 0, 0, 0.2) 100%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            rgba(255, 255, 255, 0.1) 5px,
            rgba(255, 255, 255, 0.1) 6px
        );
}



/* 调整不同大小的悬停效果 */
.big-star.pink:hover { transform: scale(1.25); }
.big-star.blue:hover { transform: scale(1.25); }
.big-star.purple:hover { transform: scale(1.25); }
.big-star.green:hover { transform: scale(1.25); }
        
        .star-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            z-index: 100;
            justify-content: center;
            align-items: flex-start;
            padding-top: 13vh;
        }
        
        .star-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            max-width: 80vw;
            max-height: 80vh;
        }
        
        .image-container {
            width: 60vmin;
            height: 60vmin;
            min-width: 300px;
            min-height: 300px;
            max-width: 500px;
            max-height: 500px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            background: transparent;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            position: relative;
            z-index: 1;
            animation: none;
            -webkit-mask-image: radial-gradient(
                circle, 
                rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.95) 45%, 
                rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.5) 60%,
                rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 75%
            );
            mask-image: radial-gradient(
                circle, 
                rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.95) 45%, 
                rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.5) 60%,
                rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 75%
            );
            filter: contrast(1.2) saturate(1.1);
        }
        
        .particle-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }
        
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: gentle-pulse 3s infinite ease-in-out;
        }
        
        @keyframes gentle-pulse {
            0%, 100% {
                opacity: 0.3;
                transform: scale(1);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.3);
            }
        }
        
        .blessing-text {
            margin-top: 30px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 20px 40px;
            border-radius: 25px;
            font-size: 1.4rem;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
            max-width: 80%;
            line-height: 1.6;
        }
        
       /* 进度条包装器 */
.progress-wrapper {
    position: fixed;
    bottom: 40px;
    left: 10%;
    width: 80%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 进度提示文字 - 纯色发光效果 */
.progress-text {
    color: #ff7eb3;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 
        0 0 10px #ff7eb3,
        0 0 20px #ffeb3b,
        0 0 30px #4fc3f7;
    letter-spacing: 1px;
    padding: 8px 0;
    backdrop-filter: blur(5px);
    animation: text-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes text-pulse {
    from {
        text-shadow: 
            0 0 10px #ff7eb3,
            0 0 20px rgba(255, 235, 59, 0.5),
            0 0 30px rgba(79, 195, 247, 0.3);
    }
    to {
        text-shadow: 
            0 0 15px #ff7eb3,
            0 0 25px #ffeb3b,
            0 0 35px #4fc3f7,
            0 0 45px rgba(255, 126, 179, 0.5);
    }
}

/* 进度条容器 */
.progress-container {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 126, 179, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 进度条 */
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff7eb3, #ff5c9a, #ff7eb3);
    border-radius: 12px;
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 
        0 0 20px rgba(255, 126, 179, 0.6),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
}



@keyframes birthday-popup {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 添加在style标签内的任意位置 */
@keyframes firework-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.firework-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: firework-explode 1.5s ease-out forwards;
}


/* 烟花遮罩层 */
.fireworks-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    /* 确保在导航栏下面 */
    padding-top: 60px;
    box-sizing: border-box;
}

.fireworks-overlay #fireworksCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
}

/* 蛋糕容器 - 放在烟花遮罩层内 */
.cake-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1003;
  pointer-events: none;
  display: none;
}

/* 整合的蛋糕组件 */
.cake-group {
  position: absolute;
  top: 30%; /* 蛋糕位置 - 在页面上方 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1004;
}

/* 蛋糕主体 */
.cake {
  width: 200px;
  height: 60px;
  background: #f9fdff;
  border-radius: 100%;
  box-shadow: 
    0px 4px 0px #f4f9fd, 
    0px 8px 0px #dba9ff, 
    0px 12px 0px #fec3b3, 
    0px 16px 0px #f7f6fb, 
    0px 20px 0px #f7f6fb, 
    0px 24px 0px #f7f6fb, 
    0px 28px 0px #f7f6fb, 
    0px 32px 0px #fea0bb, 
    0px 36px 0px #fea0bb, 
    0px 40px 0px #9cef9d, 
    0px 44px 0px #9cef9d, 
    0px 48px 0px #f7f6fb, 
    0px 52px 0px #f7f6fb, 
    0px 56px 0px #f7f6fb, 
    0px 60px 0px #f7f6fb, 
    0px 64px 0px #f7f6fb, 
    0px 68px 0px #dfa5fc, 
    0px 72px 0px #dfa5fc, 
    0px 76px 0px #fafffe, 
    0px 80px 0px #fafffe;
  position: relative;
  z-index: 2;
}

/* 蜡烛 */
.candle {
  position: absolute;
  top: -20px; /* 蜡烛在蛋糕上方 */
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 12px;
  background: linear-gradient(0deg, #b7f4a7 0%, white 100%);
  border-radius: 4px;
  z-index: 3;
}

/* 火焰 */
.flame {
  position: absolute;
  top: -25px; /* 火焰在蜡烛上方 */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #FFF6D9, #FBC36C);
  width: 15px;
  height: 35px;
  border-top-left-radius: 10px 35px;
  border-top-right-radius: 10px 35px;
  border-bottom-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
  transform-origin: bottom;
  animation: flicker 1s ease-in-out alternate infinite;
  z-index: 4;
}

/* 蛋糕盘子 */
.plate {
  position: absolute;
  top: 60px; /* 盘子在蛋糕下方 */
  left: 50%;
  transform: translateX(-50%);
  height: 90px;
  width: 300px;
  border-radius: 100%;
  background: radial-gradient(ellipse closest-side at center, #08c7fe 0%, #04d7f2 71%, #02ffd0 100%);
  box-shadow: 0px 3px 0px #00e2e1, 0px 6px 0px #00d3fb;
  z-index: 1;
}

@keyframes flicker {
  0% {
    transform: translateX(-50%) skewX(5deg);
    box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
  }
  25% {
    transform: translateX(-50%) skewX(-5deg);
    box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
  }
  50% {
    transform: translateX(-50%) skewX(10deg);
    box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
  }
  75% {
    transform: translateX(-50%) skewX(-10deg);
    box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
  }
  100% {
    transform: translateX(-50%) skewX(5deg);
    box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
  }
}

.fireworks-overlay .birthday-text {
  position: absolute;
  top: 55%; /* 生日文字在蛋糕下方 */
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1002;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  display: none;
  background: linear-gradient(45deg, #ff7eb3, #ff5c9a, #ffeb3b, #4fc3f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 
    0 0 20px rgba(255, 126, 179, 0.8),
    0 0 40px rgba(255, 235, 59, 0.6),
    0 0 60px rgba(79, 195, 247, 0.4);
  animation: birthday-popup 2s ease-out forwards;
  white-space: nowrap;
  padding: 0 20px;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .fireworks-overlay .birthday-text {
        font-size: 3rem; /* 在手机上使用更小的字体 */
    }
}

@media (max-width: 480px) {
    .fireworks-overlay .birthday-text {
        font-size: 2.5rem; /* 在小手机上进一步减小字体 */
    }
}

@keyframes particle-move {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}



    </style>
</head>
<!-- 顶部导航栏 -->
<div class="top-navbar">
    <div class="nav-back-btn" id="navBackBtn" style="display: none;">&lt;</div>
    <div class="nav-title">太空生日庆祝</div>
</div>
<body>
    <div class="space-background"></div>
    <div class="stars-container" id="stars"></div>
    
    <div class="container">
        <h1 class="title">收集星星解锁烟花秀</h1>
        <button class="start-btn" id="startBtn">开始旅程</button>
    </div>
    
    <div class="stars-page" id="starsPage">
        <div class="stars-container" id="stars2"></div>
        
        <div class="big-star yellow" id="bigStarCenter" data-content="center"></div>
        <div class="big-star pink" id="bigStarTopLeft" data-content="topleft"></div>
        <div class="big-star blue" id="bigStarTopRight" data-content="topright"></div>
        <div class="big-star purple" id="bigStarBottomLeft" data-content="bottomleft"></div>
        <div class="big-star green" id="bigStarBottomRight" data-content="bottomright"></div>
        
        <div class="star-overlay" id="starOverlay">
            <div class="star-content" id="starContent">
                <div class="image-container">
                    <img src="" alt="星星内容" id="starImage">
                    <div class="particle-layer" id="particleLayer"></div>
                </div>
                <div class="blessing-text" id="starText"></div>
            </div>
        </div>
        
        <!-- 进度条 -->
<!-- 进度条 -->
<div class="progress-wrapper">
    <div class="progress-text">点击星星为进度充能：</div>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
</div>
<!-- 烟花遮罩层 -->
<div class="fireworks-overlay" id="fireworksOverlay">
   <canvas id="fireworksCanvas"></canvas>
   
   <!-- 蛋糕容器 -->
   <div class="cake-container" id="cakeContainer">
     <div class="cake-group">
       <div class="cake">
         <div class="candle">
           <div class="flame"></div>
         </div>
       </div>
       <div class="plate"></div>
     </div>
   </div>
   
   <!-- 生日文字 -->
   <div class="birthday-text" id="birthdayText">生日快乐！</div>
</div>

    <script>
    let collectedStars = new Set();
    let totalStars = 5;
    
        function createStars(containerId, count) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            container.innerHTML = '';
            
            for (let i = 0; i < count; i++) {
                const star = document.createElement('div');
                const sizes = ['small', 'medium', 'large'];
                const size = sizes[Math.floor(Math.random() * sizes.length)];
                star.className = 'star ' + size;
                
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.animationDelay = (Math.random() * 5) + 's';
                
                container.appendChild(star);
            }
        }
        
        function setupBigStars() {
            const positions = [
                { id: 'bigStarCenter', area: 'center' },
                { id: 'bigStarTopLeft', area: 'topleft' },
                { id: 'bigStarTopRight', area: 'topright' },
                { id: 'bigStarBottomLeft', area: 'bottomleft' },
                { id: 'bigStarBottomRight', area: 'bottomright' }
            ];
            
            const areaBounds = {
                center: { leftMin: 45, leftMax: 55, topMin: 45, topMax: 55 },
                topleft: { leftMin: 20, leftMax: 30, topMin: 20, topMax: 30 },
                topright: { leftMin: 70, leftMax: 80, topMin: 20, topMax: 30 },
                bottomleft: { leftMin: 20, leftMax: 30, topMin: 70, topMax: 80 },
                bottomright: { leftMin: 70, leftMax: 80, topMin: 70, topMax: 80 }
            };
            
            positions.forEach(pos => {
                const star = document.getElementById(pos.id);
                if (star) {
                    const bounds = areaBounds[pos.area];
                    const randomLeft = bounds.leftMin + Math.random() * (bounds.leftMax - bounds.leftMin);
                    const randomTop = bounds.topMin + Math.random() * (bounds.topMax - bounds.topMin);
                    
                    star.style.left = randomLeft + '%';
                    star.style.top = randomTop + '%';
                }
            });
        }
        
     // 修改星星点击事件，避免重复触发
        function setupStarClickEvents() {
            const starContents = {
                center: { text: "中心星星的祝福！", image: "images/魔仙堡女王登基.jpg" },
                topleft: { text: "左上角星星的惊喜！", image: "images/想起一位故人.jpg" },
                topright: { text: "右上角星星的礼物！", image: "images/每一天都很开心.jpg" },
                bottomleft: { text: "左下角星星的愿望！", image: "images/听歌听的是心情.jpg" },
                bottomright: { text: "右下角星星的梦想！", image: "images/爱是毛茸茸的信号.jpg" }
            };
            
            document.querySelectorAll('.big-star').forEach(star => {
                star.addEventListener('click', function() {
                    // 如果已经在放烟花，不再处理点击
                    if (document.getElementById('fireworksOverlay').style.display === 'block') {
        return;
    }
                    
                    const contentKey = this.getAttribute('data-content');
                    const content = starContents[contentKey];
                    
                    document.getElementById('starImage').src = content.image;
                    document.getElementById('starText').textContent = content.text;
                    document.getElementById('starOverlay').style.display = 'flex';
                    createParticles();
                    
                    // 记录收集的星星
                    if (!collectedStars.has(contentKey)) {
                        collectedStars.add(contentKey);
                        console.log('已收集星星:', Array.from(collectedStars));
                        console.log('进度:', collectedStars.size + '/' + totalStars);
                        updateProgress();
                        
                        // 如果收集完所有星星，立即触发烟花
                        if (collectedStars.size === totalStars) {
                        	console.log('所有星星收集完成！触发烟花！');
                            // 延迟一点触发，让用户看到最后一颗星星的内容
                            setTimeout(() => {
                                showFireworks();
                            }, 1000);
                        }
                    }
                });
            });
            
            document.getElementById('starOverlay').addEventListener('click', function(e) {
                if (e.target === this) {
                    this.style.display = 'none';
                }
            });
        }
        
        function updateProgress() {
            const progress = (collectedStars.size / totalStars) * 100;
            document.getElementById('progressBar').style.width = progress + '%';
            // 移除了进度提示的更新代码
        }

        function initCanvasFireworks() {
            const canvas = document.getElementById('fireworksCanvas');
            const container = document.getElementById('fireworksOverlay');
            
            // 设置Canvas尺寸
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
            
            const ctx = canvas.getContext('2d');
            
            // 烟花参数
            const listFire = [];
            const listFirework = [];
            const fireNumber = 10;
            
            // 初始化上升的火花
            for (let i = 0; i < fireNumber; i++) {
                const fire = {
                    x: Math.random() * canvas.width,
                    y: canvas.height,
                    size: Math.random() + 1,
                    fill: '#ffeb3b',
                    vx: (Math.random() - 0.5) * 2,
                    vy: -(Math.random() * 3 + 5),
                    ax: Math.random() * 0.02 - 0.01,
                    far: Math.random() * (canvas.height / 2) + 100
                };
                listFire.push(fire);
            }
            
            // 随机颜色
            function randColor() {
                const colors = ['#ff7eb3', '#ff5c9a', '#ffeb3b', '#4fc3f7', '#ba68c8', '#81c784', '#ff9a76'];
                return colors[Math.floor(Math.random() * colors.length)];
            }
            
            // 动画循环
            function loop() {
                window.fireworksAnimationId = requestAnimationFrame(loop);
                update();
                draw();
            }
            
            function update() {
                // 更新上升火花
                for (let i = 0; i < listFire.length; i++) {
                    const fire = listFire[i];
                    
                    // 到达目标高度时爆炸
                    if (fire.y <= fire.far) {
                        // 创建爆炸粒子
                        const color = randColor();
                        for (let j = 0; j < 60; j++) {
                            const firework = {
                                x: fire.x,
                                y: fire.y,
                                size: Math.random() * 3 + 1,
                                fill: color,
                                vx: (Math.random() - 0.5) * 8,
                                vy: (Math.random() - 0.5) * 8,
                                ay: 0.03,
                                alpha: 1,
                                life: 100 + Math.random() * 50
                            };
                            listFirework.push(firework);
                        }
                        // 重置火花
                        fire.y = canvas.height;
                        fire.x = Math.random() * canvas.width;
                        fire.far = Math.random() * (canvas.height / 2) + 100;
                    }
                    
                    // 更新位置
                    fire.x += fire.vx;
                    fire.y += fire.vy;
                    fire.vx += fire.ax;
                }
                
                // 更新爆炸粒子
                for (let i = listFirework.length - 1; i >= 0; i--) {
                    const firework = listFirework[i];
                    firework.x += firework.vx;
                    firework.y += firework.vy;
                    firework.vy += firework.ay;
                    firework.alpha = firework.life / 150;
                    firework.life--;
                    
                    if (firework.life <= 0) {
                        listFirework.splice(i, 1);
                    }
                }
            }
            
            function draw() {
                // 半透明黑色背景，产生拖尾效果
                ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 绘制上升火花
                for (let i = 0; i < listFire.length; i++) {
                    const fire = listFire[i];
                    ctx.beginPath();
                    ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
                    ctx.fillStyle = fire.fill;
                    ctx.fill();
                }
                
                // 绘制爆炸粒子
                for (let i = 0; i < listFirework.length; i++) {
                    const firework = listFirework[i];
                    ctx.globalAlpha = firework.alpha;
                    ctx.beginPath();
                    ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
                    ctx.fillStyle = firework.fill;
                    ctx.fill();
                }
                ctx.globalAlpha = 1;
            }
            
            // 开始动画
            loop();
        }
        
        
        // 显示烟花效果
   // 显示烟花效果
function showFireworks() {
    console.log('showFireworks函数被调用');
    
    const fireworksOverlay = document.getElementById('fireworksOverlay');
    const birthdayText = document.getElementById('birthdayText');
    const cakeContainer = document.getElementById('cakeContainer');
    const navBackBtn = document.getElementById('navBackBtn');
    const starOverlay = document.getElementById('starOverlay');
    
    // 关闭星星遮罩层
    starOverlay.style.display = 'none';
    
    // 显示烟花遮罩层
    fireworksOverlay.style.display = 'block';
    
    // 初始化Canvas烟花
    initCanvasFireworks();
    
    // 显示蛋糕
    cakeContainer.style.display = 'block';
    
    // 同时显示生日文字和导航栏返回按钮
    birthdayText.style.display = 'block';
    navBackBtn.style.display = 'flex';
    birthdayText.style.animation = 'none';
    setTimeout(() => {
        birthdayText.style.animation = 'birthday-popup 2s ease-out forwards';
    }, 10);
}

   // 确保烟花动画CSS已添加
      if (!document.getElementById('firework-animation')) {
          const fireworkStyle = document.createElement('style');
          fireworkStyle.id = 'firework-animation';
          fireworkStyle.textContent = `
              @keyframes firework-explode {
                  0% {
                      transform: translate(0, 0) scale(1);
                      opacity: 1;
                  }
                  100% {
                      transform: translate(var(--tx), var(--ty)) scale(0);
                      opacity: 0;
                  }
              }
          `;
          document.head.appendChild(fireworkStyle);
      }
        
        function createParticles() {
            const particleLayer = document.getElementById('particleLayer');
            if (!particleLayer) return;
            
            particleLayer.innerHTML = '';
            
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const size = Math.random() * 4 + 1;
                particle.style.width = particle.style.height = size + 'px';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = (Math.random() * 4) + 's';
                
                particleLayer.appendChild(particle);
            }
        }
        
        window.addEventListener('load', function() {
            createStars('stars', 150);
            createStars('stars2', 120);
            
            collectedStars = new Set();
            totalStars = 5;
            
            if (progressBar) {
                progressBar.style.width = '0%';
            }
            
            document.getElementById('startBtn').addEventListener('click', function() {
                document.getElementById('starsPage').style.display = 'block';
            });
            
            // 添加导航栏返回按钮点击事件
            document.getElementById('navBackBtn').addEventListener('click', function() {
                const fireworksOverlay = document.getElementById('fireworksOverlay');
                const birthdayText = document.getElementById('birthdayText');
                const starsPage = document.getElementById('starsPage');
                const navBackBtn = document.getElementById('navBackBtn');
                
                // 如果正在显示烟花，则返回星星页面
                if (fireworksOverlay.style.display === 'block') {
                    // 隐藏烟花遮罩层
                    fireworksOverlay.style.display = 'none';
                    birthdayText.style.display = 'none';
                    
                    // 停止烟花动画
                    if (window.fireworksAnimationId) {
                        cancelAnimationFrame(window.fireworksAnimationId);
                    }
                    
                    // 重置星星收集状态
                    collectedStars.clear();
                    document.getElementById('progressBar').style.width = '0%';
                    
                    // 显示星星页面
                    starsPage.style.display = 'block';
                } 
                // 如果在星星页面，则返回首页
                else if (starsPage.style.display === 'block') {
                    starsPage.style.display = 'none';
                    navBackBtn.style.display = 'none'; // 只在首页隐藏返回按钮
                }
            });
            
            setupBigStars();
            setupStarClickEvents();
        });
    </script>
</body>
</html>